/**
 * Created by 荆安喜 on 2018/1/22.
 */
$(function () {
    var ad = appData()

    $(function () {

        //安全监管信息
        ad.selectList('SAFETY_INFO', {}, function (data) {
            var str = ``
            data.forEach(function (d, i) {
                if (d.name == '网络设备') {
                    str = str + `<dd><h5>${d.name}</h5><b>${d.number}</b>台</dd>`
                } else {
                    str = str + `<dd><b>${d.number}</b>台<h5>${d.name}</h5></dd>`
                }
            })

            $('#safeInfo').html(str)
        })
        //运行状态
        ad.selectList('RUN_STATE', {}, function (data) {
            $('#health').html(data.health)
            var str = ``
            var number = 100
            var normal = data.normal
            var alarm = data.alarm
            var fault = data.fault


            function rd(n, m, x, y, z) {
                var c = m - n + 1;
                var k

                if (x == 0) {
                    var k0 = 0
                }
                if (y == 0) {
                    var k1 = 1
                }
                if (z == 0) {
                    var k2 = 2

                }
                /*while (k != k0||k!=k1||k!=k2) {
                 k = Math.floor(Math.random() * c + n)
                 }*/
                function xx(k0 = 100, k1 = 100, k2 = 100) {
                    k = Math.floor(Math.random() * c + n)
                    if (k == k0 || k == k1 || k == k2) {
                        xx(k0, k1, k2)
                    }
                }

                xx(k0, k1, k2)


                return k;
            }

            for (var i = 0; i < number; i++) {
                var select = rd(0, 2, normal, alarm, fault)
                if (select == 0) {
                    if (normal != 0) {
                        normal--
                        str = str + `<li></li>`
                    }

                } else if (select == 1) {
                    if (alarm != 0) {
                        alarm--
                        str = str + `<li class="bg-yellow"></li>`
                    }

                } else {
                    if (fault != 0) {
                        fault--
                        str = str + `<li class="bg-red"></li>`
                    }

                }
            }


            /*data.datas.forEach(function (d, i) {
             if (d.type == 0) {
             str = str + `<li></li>`
             } else if (d.type == 1) {
             str = str + `<li class="bg-yellow"></li>`
             } else {
             str = str + `<li class="bg-red"></li>`
             }
             })*/
            $('#run').html(str)

            var strList = `<li ><em class="bg-green" ></em>正常 ${data.normal}%</li>
             <li ><em class="bg-yellow"></em>告警 ${data.alarm}%</li>
             <li ><em class="bg-red"></em>故障 ${data.fault}</li>`
            $('#list').html(strList)
        })
        //安全态势
        ad.selectList('SAFETY_SITUATIONAL', {}, function (data) {
            data.forEach(function (d, i) {
                if (d.name == "综合指数") {
                    $('#one').html(d.number)
                } else if (d.name == "脆弱性指数") {
                    $('#two').html(d.number)
                } else {
                    $('#three').html(d.number)
                }
            })
        })
        //工作负载
        ad.selectList('WORK_LOAD', {}, function (data) {
            var myChart = echarts.init(document.getElementById('work'));
            var option = {

                tooltip: {},

                radar: {
                    // shape: 'circle',
                    name: {
                        textStyle: {
                            color: '#fff',
                            backgroundColor: '#999',
                            borderRadius: 0,
                            padding: [3, 3]
                        }
                    },
                    indicator: [
                        {name: '内存', max: 100},
                        {name: 'CPU', max: 100},
                        {name: '网络', max: 100},
                        {name: '磁盘', max: 100},
                    ],
                    nameGap: 4
                },
                series: [{
                    name: '预算 vs 开销（Budget vs spending）',
                    type: 'radar',
                    data: [
                        {
                            value: data.value,
                            name: '大小'
                        }
                    ]
                }]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
        })
        //综合管理平台
        ad.selectList('MANAGE_PLATFORM', {}, function (data) {

            var settings = []
            data.forEach(function (d, i) {
                var setting = {
                    image: d.image,
                    heading: `<ul class="list01"><li><h3>${d.name}</h3></li><li><em>台</em><b>${d.server}</b>服务器</li><li><em>台</em><b>${d.network}</b>网络</li><li><em>台</em><b>${d.storage}</b>存储</li><li><b>${d.availability}</b>实时可用性</li><li><em>ms</em><b>${d.time}</b>实时响应时间</li><li>写入量<div><i>${d.in}</i><span style="width:${(d.in/(d.out+d.in))*100||0}%; background:#21d5d7;"></span></div></li><li>输出量<div><i>${d.out}</i><span style="width:${(d.out/(d.out+d.in))*100||0}%; background:#f77880;"></span></div></li></ul>`,
                    description: '',
                }

                settings.push(setting)
            })

            var options = {
                circle_radius: 220,
                normal_feature_size: 100,
                highlighted_feature_size: 100,
                top_margin: 60,
                bottom_margin: 50,
                spacing: 40,
                min_padding: 50,
                heading_font_size: 30,
                description_font_size: 20,
                type: 'image',
                automaticAnimation: true
            };

            var fp = new FeaturePresenter($("#test-element"), settings, options, function (id) {
                change(id)
                ad.selectList('MANAGE_INFO', {id: id}, function (info) {
                    var str = `<li><h3>${info.name}</h3></li><li><em>台</em><b>${info.server}</b>服务器</li><li><em>台</em><b>${info.network}</b>网络</li><li><em>台</em><b>${info.storage}</b>存储</li><li><b>${info.availability}</b>实时可用性</li><li><em>ms</em><b>${info.time}</b>实时响应时间</li><li>写入量<div><i>${info.in}</i><span style="width:${(info.in/(info.in+info.out))*100||0}%; background:#21d5d7;"></span></div></li><li>输出量<div><i>${info.out}</i><span style="width:${(info.out/(info.out+info.in))*100||0}%; background:#f77880;"></span></div></li>`
                    $('.list01').html(str)
                })


            });
            fp.createPresenter()

            $(".feature-presenter").each(function (d, i) {
                i.id = data[d].id
            })

            change(data[0].id)
            var time = setInterval(function () {
                $(".feature-presenter[data-feature='1']").click()

            }, 5000)
            //鼠标控制
            $(".feature-presenter").mouseover(function () {
                clearInterval(time)
            }).mouseout(function () {
                time = setInterval(function () {
                    $(".feature-presenter[data-feature='1']").click()

                }, 5000)
            })

            rolling()

        })

        //时间
        var myDate = new Date();
        var mytime = myDate.toLocaleString();
        $('.toptime').html(mytime)
        setInterval(function () {
            var myDate = new Date();
            var mytime = myDate.toLocaleString();
            $('.toptime').html(mytime)
        }, 1000)
    })

    //下4图变动
    function change(id) {

        //资源状态
        ad.selectList('RESOURCE_STATE', {id: id}, function (data) {
            if (data == '') {
                $('#chart1').attr('_echarts_instance_', '')
                return $('#chart1').html('暂无数据')
            }
            var myChart = echarts.init(document.getElementById('chart1'));
            myChart.resize();
            var option = {
                title: {
                    text: '安全指数',
                    "x": "center",
                    top: '84%',
                    textStyle: {
                        fontSize: 20,
                        color: 'white'
                    }

                },
                series: [{
                    name: '风险概况',
                    type: 'gauge',
                    radius: '100%',
                    axisLine: {
                        lineStyle: {
                            width: 6,
                            color: [[0.2, '#d33636'], [0.4, '#51e0ed'], [0.6, '#51e0ed'], [0.8, '#51e0ed'], [1, '#1b7cf9']]
                        }
                    },
                    splitLine: {           // 分隔线
                        length: 10,         // 属性length控制线长
                        lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
                            color: 'auto'
                        }
                    },
                    center: ['50%', '50%'], // 默认全局居中

                    data: [{
                        value: data
                    }]
                }]
            };
            myChart.setOption(option);
        })

        //资源访问量排名
        ad.selectList('RESOURCE_TRAFFIC', {id: id}, function (data) {
            if (data.length == 0) {
                return $('#ips').html('暂无数据')
            }
            var str = ``

            data.forEach(function (d, i) {
                if (i > 5) {
                    return
                }
                str = str + `<dd>
                        	<h5>${d.name}</h5>
                        	<div class="persent"><span style=" width:${d.percent}%">${d.percent}%</span></div>
                            <b>${d.number}</b>
                        </dd>`
            })
            $('#ips').html(str)
        })

        //审计告警
        ad.selectList('AUDIT_ALARM', {id: id}, function (data) {
            if (data.length == 0) {
                return $('#alarm').html('暂无数据')
            }
            var str = ``

            data.forEach(function (d, i) {
                if (i > 100) {
                    return
                } else {
                    str = str + `<dd>${d.time}   名称:${d.name}    ip:${d.ip}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;操作:${d.type} 违规时间段访问规则:${d.rank} </dd>`

                }
            })


            $('#alarm').html(str)
        })

        //风险级别
        ad.selectList('LEVEL_RISK', {id: id}, function (data) {
            if (data.datas.length == 0) {
                $('#risk').attr('_echarts_instance_', '')
                return $('#risk').html('暂无数据')
            }
            var myChart = echarts.init(document.getElementById('risk'));
            myChart.resize();
            var option = {
                noDataLoadingOption: {
                    text: '暂无数据',
                    effect: 'bubble',
                    effectOption: {
                        effect: {
                            n: 0
                        }
                    }
                },
                color: ['#1b7cf9', '#51e0ed', '#d33636'],
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b}: {c} ({d}%)",
                },

                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['42%', '55%'],
                        selectedMode: 'single',
                        hoverAnimation: true,
                        label: {
                            normal: {
                                formatter: '{b}\n{d}%'
                            },

                        },
                        data: data.datas
                    }
                ]
            }
            myChart.setOption(option);
        })

    }

    var timer = null;
    //滚动
    function rolling() {
        //获得当前<ul>
        var $uList = $(".tips dl");
        clearInterval(timer)
        //触摸清空定时器
        $uList.hover(function () {
                clearInterval(timer);
            },
            function () { //离开启动定时器
                timer = setInterval(function () {
                        scrollList($uList);
                    },
                    2000);
            }).trigger("mouseleave"); //自动触发触摸事件
        //滚动动画
        function scrollList(obj) {
            //获得当前<li>的高度
            var scrollHeight = $("#alarm dd:first").height();
            //滚动出一个<li>的高度
            $uList.stop().animate({
                    marginTop: -scrollHeight
                },
                800,
                function () {
                    //动画结束后，将当前<ul>marginTop置为初始值0状态，再将第一个<li>拼接到末尾。
                    $uList.css({
                        marginTop: 0
                    }).find("li:first").appendTo($uList);
                });
        }
    }
})